<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>驴妈妈流立方</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/daterangepicker.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/fonts.googleapis.com.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-rtl.min.css" />
		<!-- ace settings handler -->
		<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
<style>

.node {
  cursor: pointer;
}
.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}
.node text {
  font: 10px sans-serif;
}
.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}
.dFilter
{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color:Gray;
    left: 0px;
    top: 0px;
}
.dBody
{
    position: absolute;
    z-index: 1000;
    border: 2px solid #C4D9F6;
    background-color: white;
}
.dHeader
{
    height: 20px;
    width: 100%;
    line-height: 20px;
}
.dHeader label
{
    color: Black;
    float: left;
    font-weight: bold;
    margin-left: 5px;
    line-height:20px;
}
.dHeader img
{
    float: right;
    height:18px;
    width:35px;
    background-image: url(${rc.contextPath}/images/gb3.png);
}
.labelshow
{
    color: Black;
    float: left;
    font-weight: bold;
    margin-left: 5px;
    line-height:20px;
    height:10px;
    weight:30px;
}
.linetext {  
    font-size: 12px ;  
    font-family: SimSun;  
    fill:#0000FF;  
    fill-opacity:1.0;  
}  
.showDivClass{
	float:right; 
	position:fixed;
	_position:absolute; 
	
	position:fixed;
	z-index:2000;
	width:270px; 
	padding:0;
	margin:0;
	height:200px;
	text-align:center;
 
	top:20%;
	right:10%;
	_top:expression_r(documentElement.scrollTop +200 + "px") 
}
.showDiv1Class{
	float:right; 
	position:fixed;
	_position:absolute; 
	
	position:fixed;
	z-index:2000;
	width:270px; 
	padding:0;
	margin:0;
	height:200px;
	text-align:center;
 
	top:20%;
	right:10%;
	_top:expression_r(documentElement.scrollTop +200 + "px") 
}
.showDataClass{
	width:300px;
	height:620px;
	padding:;
	background:;
	position:absolute;
	right:0;
	bottom:0;
}
</style>
	</head>

		<body class="skin-2" style="background-color: #FFF;">
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<div class="row">
						<div class="col-xs-12">
							<div class="widget-box" style="margin-bottom: 0px; border-bottom: 0px;">
								<div class="widget-header widget-header-small">
									<h5 class="widget-title lighter">筛选条件</h5>
								</div>
								<div class="widget-body" style="background-color: #EFF3F8;">
									<div class="widget-main">
										<form class="form-inline" id="searchForm" method="post" action="${rc.contextPath}/log/list">
										  	<div class="form-group">
										    	<label for="exampleInputName2">开始时间</label>
										    	<input type="text" class="form-control datetimepicker" id="beginDate" name="beginDate" value="${beginDate!}" placeholder="查询开始时间">
										  	</div>
										  	<div class="form-group">
										    	<label for="exampleInputName2">结束时间</label>
										    	<input type="text" class="form-control datetimepicker" id="endDate" name="endDate" value="${endDate!}" placeholder="查询结束时间">
										  	</div>
										  	<button id="search" type="button" class="btn btn-purple btn-sm" onclick="cheackDateAndShowTree()">
												<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
												确认
											</button>
											<button id="resetting" type="button" class="btn btn-purple btn-sm" onclick="resetDateAndShowTree()" style="display:none">
												<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
												重新设定时间
											</button>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="treeShow" class="row">
						
					</div>
					<div id="treeShowList" class="row" style="display:inline;">
						<div id="treeShowList1" style="width:33%;height:auto;background:;float:left;margin-left:1px;margin-right:1px;display:inline;" class="row">
							<table id="netTable" class="table" style="display:none;">
								<thead>
									<tr>
									<th>序号</th>
									<th>网络类型</th>
									<th>流量</th>
									<th>占比</th>
									</tr>
								</thead>
								<tbody id="netTable_body">
								</tbody>
							</table>
						</div>
						<div id="treeShowList2" style="width:33%;height:auto;background:;float:left;margin-left:1px;margin-right:1px;display:inline;" class="row">
							<table id="deviceTable" class="table" style="display:none;">
								<thead>
									<tr>
									<th>序号</th>
									<th>平台版本</th>
									<th>流量</th>
									<th>占比</th>
									</tr>
								</thead>
								<tbody id="deviceTable_body">
								</tbody>
							</table>
						</div>
						<div id="treeShowList3" style="width:30%;height:auto;background:;float:left;margin-left:1px;margin-right:1px;display:inline;" class="row">
							<table id="regionTable" class="table" style="display:none;">
								<thead>
									<tr>
									<th>序号</th>
									<th>访问来源</th>
									<th>流量</th>
									<th>占比</th>
									</tr>
								</thead>
								<tbody id="regionTable_body">
								</tbody>
							</table>
						</div>
					</div>
					<!-- div id="treeShow1" style="width:15%;height:100px;float:right;background:red;" class="row">
						
					</div> -->
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div>
<!-- basic scripts -->
		<script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
		<!-- ace scripts -->
		<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
		<!-- validator scripts -->
		<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
		<!-- user scripts -->
		<script src="${rc.contextPath}/assets/js/user/base.js"></script>
		<script src="${rc.contextPath}/assets/js/d3.v3.min.js"></script>
		<script type="text/javascript">
			var message = "${message}";
			if(!isEmpty(message)) {
				showMsg(message);
			}
		</script>
		<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>

		<!-- inline scripts related to this page -->
<script type="text/javascript">
var colorFlag = "";
var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 1500 - margin.right - margin.left,
    height = 600 - margin.top - margin.bottom;

var i = 0,duration = 750,root;
d3.rgb("decimal")
var tree = d3.layout.tree().size([height, width]);

var diagonal = d3.svg.diagonal().projection(function(d) { return [d.y, d.x]; });

//var svg = d3.select("div").append("svg")
var svg = d3.select("#treeShow").append("svg")
     //.attr("width", width + margin.right + margin.left)
     .attr("width", "100%")
     //.attr("width", "1000")
     .attr("height", "600")
     //.attr("height", height + margin.top + margin.bottom)
     //.attr("height", "100%")
     //.attr("viewBox",'0 0 700 500')
   	 .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.select(self.frameElement).style("height", "1200px");

var checkBeginDate,checkEndDate;

jQuery(function($) {
	var options = {format:'YYYY-MM-DD'}
	$('.datetimepicker').datetimepicker(options).next().on(ace.click_event, function(){
		$(this).prev().focus();
	});
	cheackDateAndShowTree();
	//initTreeJson_d3json();
});
//校验时间，显示树图
function cheackDateAndShowTree(){
	var beginDate = $("#beginDate").val();
	var endDate = $("#endDate").val();
	if(isEmpty(beginDate)){
		showMsg("开始日期不能为空");
		return false;
	}
	if(isEmpty(endDate)){
		showMsg("结束日期不能为空");
		return false;
	}
	//判断时间的业务性是否正确：最长一年，跨度三个月。
	//可以js判断
	
	checkBeginDate = document.getElementById("beginDate").value;
	checkEndDate = document.getElementById("endDate").value;
	
	document.getElementById("endDate").disabled = "disabled";
	document.getElementById("beginDate").disabled = "disabled";
	document.getElementById("search").style.display = "none";
	document.getElementById("resetting").style.display = "";
	
	initTreeJson_d3json();
}
function resetDateAndShowTree(){
	checkBeginDate = "";
	checkEndDate = "";
	
	document.getElementById("endDate").disabled = "";
	document.getElementById("beginDate").disabled = "";;
	document.getElementById("search").style.display = "";
	document.getElementById("resetting").style.display = "none";
	//去除树
	
}

function initTreeJson_d3json(){
	var beginDate = $("#beginDate").val();
	var endDate = $("#endDate").val();
	d3.json("${rc.contextPath}/treeStatistics/QueryTreeStructureFlow?rootNodeId=1"+"&beginDate="+beginDate+"&endDate="+endDate, 
		function(error, flare) {
			if (error) throw error;
			if(flare.mess){
				if(flare.mess == "a"){
					showMsg("结束日期  不能大于  当前日期");
				}else if(flare.mess == "b"){
					showMsg("开始日期   必须小于等于   结束日期");
				}else if(flare.mess == "c"){
					showMsg("开始日期   最大查询3年前");
				}else if(flare.mess == "d"){
					showMsg("开始  和  结束 日期的跨度不能大于6个月");
				}else{
					showMsg("日期规则不对");
				}
				return false;
			}
			root = flare.tree;
			root.x0 = height / 2;
			root.y0 = 0;
			function collapse(d) {
				if (d.children) {
	    			d._children = d.children;
	      			d._children.forEach(collapse);
	      			d.children = null;
	    		}
			}
			root.children.forEach(collapse);
			update(root);
	});
}

function update(source) {
	// Compute the new tree layout.
   	var nodes = tree.nodes(root).reverse();
    var links = tree.links(nodes);

   	// Normalize for fixed-depth.
   	nodes.forEach(function(d) { d.y = d.depth * 180; });
   	
   	// Update the nodes…
   	var node = svg.selectAll("g.node")
       	.data(nodes, function(d) { return d.id || (d.id = ++i); });

   	// Enter any new nodes at the parent's previous position.
   	var nodeEnter = node.enter().append("g")
    	.attr("class", "node")
       	.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; });
   	
   	nodeEnter.append("circle")
       	.attr("r", 1e-6)
       	.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }).on("click", click);

   	nodeEnter.append("text").attr("id",function(d) { return "desc_" + d.nodeId; })//.style("background-color", "green")
       	.attr("x", function(d) { return d.children || d._children ? -10 : -10; })
       	.attr("dy", ".35em")
       	.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "end"; })
       	.text(function(d) { if(d.nodeDesc==null){return d.nodeName;}else {return d.nodeDesc+d.nodeName;} })
       	.style("fill-opacity", 1e-6)
       	.on("mousedown",showDivList)
       	.on("click",function(d) { if(colorFlag != ""){d3.select("#" + colorFlag).attr('fill', '');}; colorFlag = "desc_" + d.nodeId; d3.select("#desc_" + d.nodeId).attr('fill', 'red'); });
   	
   	nodeEnter.append("text").attr("id",function(d) { return "number_" + d.nodeId; })
    .attr("x", function(d) { return d.children || d._children ? 10 : 10; })
    .attr("dy", ".35em")
    .attr("text-anchor", function(d) { return d.children || d._children ? "start" : "start"; })
    .text(function(d) {
    			if(d.showValueFlag == 'Y'){
    				var str;
        			if(d.countValue){
        				if(d.rateValue){
        						str = d.countValue+"-"+d.rateValue;
        				}else{
        						str = d.countValue;
        				}
        			}else{
        				if(d.rateValue){
        						str = d.rateValue;
        				}else{
        						str = "";
        				}
        			}
        			return str;
    			}else{
    				if(d.nodeId == '1'){
    					return "";
    				}else{
    					return "0";
    				}
    			}
    })
    .style("fill-opacity", "1")
    .on("mousedown",showDivList).on("click",function(d) { if(colorFlag != ""){d3.select("#" + colorFlag).attr('fill', '');}; colorFlag = "number_" + d.nodeId; d3.select("#number_" + d.nodeId).attr('fill', 'red'); });
   
   	// Transition nodes to their new position.
   	var nodeUpdate = node.transition()
       	.duration(duration)
       	.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

   	nodeUpdate.select("circle")
       	.attr("r", 4.5)
       	.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

   	nodeUpdate.select("text")
       	.style("fill-opacity", 1);

   	// Transition exiting nodes to the parent's new position.
   	var nodeExit = node.exit().transition()
       	.duration(duration)
       	.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
       	.remove();

   	nodeExit.select("circle")
       	.attr("r", 1e-6);

   	nodeExit.select("text")
       	.style("fill-opacity", 1e-6);

   	// Update the links…
   	var link = svg.selectAll("path.link")
       	.data(links, function(d) { return d.target.id; });

   	// Enter any new links at the parent's previous position.
  	link.enter().insert("path", "g")
       	.attr("class", "link")
       	.attr("d", function(d) {
         	var o = {x: source.x0, y: source.y0};
         	return diagonal({source: o, target: o});
       	})
       	.append("text").attr("class","linetext").text("sad");
  	  
   	// Transition links to their new position.
   	link.transition()
       	.duration(duration)
       	.attr("d", diagonal);

   	// Transition exiting nodes to the parent's new position.
   	link.exit().transition()
       	.duration(duration)
       	.attr("d", function(d) {
         	var o = {x: source.x, y: source.y};
         	return diagonal({source: o, target: o});
       	})
       	.remove();

   	// Stash the old positions for transition.
   	nodes.forEach(function(d) {
     	d.x0 = d.x;
     	d.y0 = d.y;
   	});
 }

// Toggle children on click.
function click(d) {
	var showDivMess = document.getElementById("showDiv");
	if(showDivMess){
		showDivMess.parentNode.removeChild(showDivMess);
	}
	var showErrorDivMess = document.getElementById("showErrorDiv");
	if(showErrorDivMess){
		document.body.removeChild(showErrorDivMess);
	}
	if(d.nodeId == '1'){
		return;
	}
	if(checkBeginDate==document.getElementById("beginDate").value&&checkEndDate==document.getElementById("endDate").value){
		
	}else{
		alert("时间范围不能改变！");return;
	}
	var beginDate = $("#beginDate").val();
	var endDate = $("#endDate").val();
	if (d.children) {//缩小时调用
    	d._children = d.children;
     	d.children = null;
     	update(d);
   	} else {//点击扩大时调用,通过父节点（即d节点）查询数据库
   		
		$.ajax({
 			url: "${rc.contextPath}/treeStatistics/QueryChildrenRateAndCount?nodeId="+d.nodeId+"&beginDate="+beginDate+"&endDate="+endDate,
 		   	dataType:"json",
 		   	success: function(children_data){
 				if(children_data != null){
 					d.children = d._children;
 					d.children.forEach(function(e){
 						var nodeId = e.nodeId;
 						children_data.children.forEach(function(k){
 							if(nodeId == k.nodeId){
 								e.rateValue = k.rateValue;
 							   	e.countValue = k.countValue;
 						   	}
 					   	})
 					})
 			     	d._children = null;
 			     	update(d);
 			   	}
 		   	}
		});
	 //d.children = d._children;
   	 //d._children = null;
	}
   	//update(d);
}

function isEmpty(str) {
	if (str != null && str.length > 0) {
		return false;
	}
	return true;
}

//弹框div显示流量数据
function showDiv(ev){
	if(ev.nodeId == '1'){
		return;
	}
	//加入不显示值则直接返回
	if(ev.showValueFlag == 'N'){
		showMsg("暂时没有数据！");
		return;
	}
	if(checkBeginDate==document.getElementById("beginDate").value&&checkEndDate==document.getElementById("endDate").value){
		
	}else{
		alert("时间范围不能改变！");return;
	}
	var beginDate = $("#beginDate").val();
	var endDate = $("#endDate").val();
	if(isEmpty(beginDate)){
		showMsg("开始日期不能为空");
		return false;
	}
	if(isEmpty(endDate)){
		showMsg("结束日期不能为空");
		return false;
	}
	var showDivMess = document.getElementById("showDiv");
	if(showDivMess){
		showDivMess.parentNode.removeChild(showDivMess);
	}
	var showErrorDivMess = document.getElementById("showErrorDiv");
	if(showErrorDivMess){
		document.body.removeChild(showErrorDivMess);
	}
	$.ajax({
			url: "${rc.contextPath}/treeStatistics/QueryNodeDatabyNode?nodeId="+ev.nodeId+"&beginDate="+beginDate+"&endDate="+endDate,
		   	dataType:"json",
		   	success: function(data){
					var oEvent = ev || event;
				    var oDiv = document.createElement('div');
				    oDiv.setAttribute("id", "showDiv");
					oDiv.setAttribute("class", "showDataClass");
					
					oDiv.style.width = '300px'; // 指定宽度
					oDiv.style.width = '20%'; // 指定宽度
					//oDiv.style.height = '620px'; // 指定高度
					oDiv.style.height = 'auto'; // 指定高度
					//选择之前右下角的div
					var oDivData = document.getElementById('treeShow');
				    oDivData.appendChild(oDiv);
				    oDiv.innerHTML = "<div id=\"topTitle\" onClick=\"closeShowDiv()\" class=\"dHeader\" style=\"background-color:#DDF8FF; float:left; width:100%;height:18px;margin-top:1px\">"+
            		"<img alt=\"\" />"+
        		"</div>"+
        		"<div id=\"stscDiv\" style=\"background-color:#FFFFFF; float:left; width:100%;height:auto;margin-top:1px\">"+
            	//"设备属性"+
            	"<table id=\"deviceTable\" style=\"border:1px solid #BBBBBB;bordercolor:#BBBBBB;width:100%\">"+
   								"<tr>"+ 
   									"<td style=\"text-align:center;vertical-align:middle;border:1px solid #BBBBBB;width:10%\">序号</td>"+
   									"<td style=\"text-align:center;vertical-align:middle;border:1px solid #BBBBBB;width:30%\">平台版本</td>"+
      								"<td style=\"text-align:center;vertical-align:middle;border:1px solid #BBBBBB;width:30%\">流量</td>"+
      								"<td style=\"text-align:center;vertical-align:middle;border:1px solid #BBBBBB;width:30%\">占比</td>"+
   								"</tr>"+
								"</table>"+
								//"网络类型"+
								"<table id=\"nettypeTable\" style=\"border:1px solid #BBBBBB;width:100%\">"+
   								"<tr>"+ 
   									"<td style=\"text-align:center;vertical-align:middle;border:1px solid #BBBBBB;width:10%\">序号</td>"+
   									"<td style=\"text-align:center;vertical-align:middle;border:1px solid #BBBBBB;width:30%\">网络类型</td>"+
      								"<td style=\"text-align:center;vertical-align:middle;border:1px solid #BBBBBB;width:30%\">流量</td>"+
      								"<td style=\"text-align:center;vertical-align:middle;border:1px solid #BBBBBB;width:30%\">占比</td>"+
   								"</tr>"+
								"</table>"+
								//"城市流量"+
								"<table id=\"regionTable\" style=\"border:1px solid #BBBBBB;width:100%\">"+
   								"<tr>"+
   									"<td style=\"text-align:center;vertical-align:middle;border:1px solid #BBBBBB;width:10%\">序号</td>"+
   									"<td style=\"text-align:center;vertical-align:middle;border:1px solid #BBBBBB;width:30%\">访问来源</td>"+
      								"<td style=\"text-align:center;vertical-align:middle;border:1px solid #BBBBBB;width:30%\">流量</td>"+
      								"<td style=\"text-align:center;vertical-align:middle;border:1px solid #BBBBBB;width:30%\">占比</td>"+
   								"</tr>"+
								"</table>"+
        		"</div>"
        		;
        		initRegiondata(data.deviceCount,data.deviceCountInfo,'deviceTable');//设置设备属性统计信息的表格
        		initRegiondata(data.netCount,data.netCountInfo,'nettypeTable');//设置网络运营商属性统计信息的表格
        		initRegiondata(data.regionCount,data.regionCountInfo,'regionTable');//设置省份流量属性统计信息的表格
		   	},
		   	error: function(XMLHttpRequest, textStatus, errorThrown){
		   		console.log(textStatus);
		   		console.log(errorThrown);
		   		showMsg("查询流量包数据失败");
		   	}
	});
}

//在div下方列表显示流量包数据，之后可以与弹框显示流量包数据进行切换
function showDivList(ev){
	var aa = "desc_" + ev.nodeId;
	var bb = "number_" + ev.nodeId;
	if(colorFlag == aa || colorFlag == bb){
		showMsg("不能重复点击查询");
		//alert("不能重复点击查询");
		return;
	}
	if(ev.nodeId == '1'){
		return;
	}
	//加入不显示值则直接返回
	if(ev.showValueFlag == 'N'){
		showMsg("暂时没有数据！");
		return;
	}
	if(checkBeginDate==document.getElementById("beginDate").value&&checkEndDate==document.getElementById("endDate").value){
		
	}else{
		alert("时间范围不能改变！");return;
	}
	var beginDate = $("#beginDate").val();
	var endDate = $("#endDate").val();
	if(isEmpty(beginDate)){
		showMsg("开始日期不能为空");
		return false;
	}
	if(isEmpty(endDate)){
		showMsg("结束日期不能为空");
		return false;
	}
	$.ajax({
			url: "${rc.contextPath}/treeStatistics/QueryNodeDatabyNode?nodeId="+ev.nodeId+"&beginDate="+beginDate+"&endDate="+endDate,
		   	dataType:"json",
		   	success: function(data){
				initDataShow(data.deviceCount,data.deviceCountInfo,'deviceTable','deviceTable_body');
				initDataShow(data.netCount,data.netCountInfo,'netTable','netTable_body');
				initDataShow(data.regionCount,data.regionCountInfo,'regionTable','regionTable_body');
		   	},
		   	error: function(XMLHttpRequest, textStatus, errorThrown){
		   		console.log(textStatus);
		   		console.log(errorThrown);
		   		showMsg("查询流量包数据失败");
		   	}
	});
}

function initDataShow(tabledata,info,tableId,tableBody){
	$("#"+tableBody).empty();
	document.getElementById(tableId).style.display = "";
	
	var tableBody = document.getElementById(tableBody);
	var i = 0;
	tabledata.forEach(function(e){
		if(i < parseInt(info.maxShow)){
			var rowIndex = tableBody.rows.length;
			var row = tableBody.insertRow(rowIndex);
			row.setAttribute("class","success");
			if(i % 2 ==0){
				row.setAttribute("class","warning");
			}
			var cell0 = row.insertCell(0);
			cell0.innerHTML = rowIndex + 1;
			cell0.setAttribute("align","center")
			
			var cell1 = row.insertCell(1);
			cell1.innerHTML = e.namedesc;
			cell1.setAttribute("align","center");
			
			var cell2 = row.insertCell(2);
			cell2.innerHTML = e.sumAmount;
			cell2.setAttribute("align","center");
			
			var cell3 = row.insertCell(3);
			cell3.innerHTML = e.percentage;
			cell3.setAttribute("align","center");
		}
		i = i+1;
	})
	
	var rowIndex = tableBody.rows.length;
	var rowHeJi = tableBody.insertRow(rowIndex);
	var cell0 = rowHeJi.insertCell(0);
	cell0.innerHTML = "";
	
	var cell1 = rowHeJi.insertCell(1);
	cell1.innerHTML = "合计";cell1.setAttribute("align","center");
	var cell2 = rowHeJi.insertCell(2);
	cell2.innerHTML = info.total;cell2.setAttribute("align","center");
	var cell3 = rowHeJi.insertCell(3);cell3.setAttribute("align","center");
	cell3.innerHTML = info.totalPercentage;
}

function initRegiondata(regionData,info,divId){
	var deviceTable = document.getElementById(divId);
	var i = 0;
	regionData.forEach(function(e){
		if(i < parseInt(info.maxShow)){
			var rowIndex=deviceTable.rows.length;
			var row = deviceTable.insertRow(rowIndex);
			row.setAttribute("bgcolor","#C9FFBB");
			if(i % 2 ==0){
				row.setAttribute("bgcolor","#FFFFAA");
			}
			
			var cell0 = row.insertCell(0);
			cell0.innerHTML = rowIndex;
			cell0.setAttribute("align","center")
			//cell0.style.border="1px solid #BBBBBB";
			
			var cell1 = row.insertCell(1);
			cell1.innerHTML = e.namedesc;cell1.setAttribute("align","center");
			//cell1.style.border="1px solid #BBBBBB";
			
			var cell2 = row.insertCell(2);
			cell2.innerHTML = e.sumAmount;cell2.setAttribute("align","center");
			//cell2.style.border="1px solid #BBBBBB";
			
			var cell3 = row.insertCell(3);
			cell3.innerHTML = e.percentage;cell3.setAttribute("align","center");
			//cell3.style.border="1px solid #BBBBBB";
		}
		i = i+1;
	})
	
	var rowIndex=deviceTable.rows.length;
	var rowHeJi = deviceTable.insertRow(rowIndex);
	var cell0 = rowHeJi.insertCell(0);
	cell0.innerHTML = "";
	//cell0.style.border="1px solid #BBBBBB";
	
	var cell1 = rowHeJi.insertCell(1);
	cell1.innerHTML = "合计";cell1.setAttribute("align","center");
	//cell1.style.border="1px solid #BBBBBB";
	var cell2 = rowHeJi.insertCell(2);
	cell2.innerHTML = info.total;cell2.setAttribute("align","center");
	//cell2.style.border="1px solid #BBBBBB";
	var cell3 = rowHeJi.insertCell(3);cell3.setAttribute("align","center");
	cell3.innerHTML = info.totalPercentage;
	//cell3.style.border="1px solid #BBBBBB";
}
function closeShowDiv(){
	//var children = document.getElementById("showDiv");
	//if(children){
  	//	document.body.removeChild(children);
	//}
	var children = document.getElementById("showDiv");
	if(children){
		children.parentNode.removeChild(children);
	}
}
</script>
</body>
</html>